<!-- 服务推广 -->
<template>
  <view class="page">
    <view class="box">
      <view class="group_1">
        <view class="group_2">
          <image :src="user.HeadImgUrl" mode="aspectFill"></image>
        </view>

        <view class="group_3">
          <text lines="1" class="text_3 hiddenText diyWidth">{{ $util.entitiesToUtf16(user.Name) }}</text>
          <view class="section_1">
            <view class="text-group_1">
              <text lines="1" class="text_4">{{ amount_of_money }}</text>
              <text lines="1" class="text_5">可提现余额</text>
            </view>
            <view class="image_3"></view>
            <view class="text-group_1">
              <text lines="1" class="text_4">{{ userList.length }}</text>
              <text lines="1" class="text_5">成功邀请</text>
            </view>
          </view>

          <view class="section_2">
            <view class="text-wrapper_3" @click="tixbtn">
              去提现
            </view>
            <view class="text-wrapper_2" @click="nav_to('/pages/otherPage/placard')">
              <text lines="1" class="text_8">专属推广码</text>
            </view>
            <!-- <view class="text-wrapper_2" @click="showImage = true">
              <text lines="1" class="text_8">专属推广码</text>
            </view> -->
          </view>
        </view>
      </view>

      <view class="group_4">
        <view class="navList">
          <view class="navContent">
            <text lines="1" class="text_5" :class="{ navActive: navIndexValue == index }" @click="navIndex(index)"
              v-for="(item, index) in navMenu" :key="index">{{ item }}</text>
          </view>
        </view>
        <!-- <view>
          <view class="text-group_2">
            <text lines="1" class="text_tem text_11">成功邀请</text>
            <text lines="1" class="text_tem text_10">{{ userList.length }}</text>
            <text lines="1" class="text_tem text_12">人</text>
          </view>
        </view> -->
        <scroll-view scroll-y="true" :style="{ 'max-height': screenHeight < 812 ? '28vh' : '36vh' }">
          <block v-if="navIndexValue == 0">
            <view class="block_2" v-for="item in userList" :key="item.ID">
              <view class="image-text_2">
                <image :src="item.HeadImgUrl" class="label_wh" mode="aspectFill"></image>
                <view>
                  <text lines="1" class="text-group_3">{{ $util.entitiesToUtf16(item.Name) }}</text>
                  <br>
                  <text lines="1" class="text-group_3 text-group_4" v-if="item.UpgradeRemark">{{ $util.entitiesToUtf16(item.UpgradeRemark) }}</text>
                </view>
                
              </view>
              <text lines="1" class="text_15">{{ getTime(item.CreateTime) }}</text>
            </view>
          </block>
          <block v-if="navIndexValue == 1">
            <view class="content" v-for="(item, index) in userMoneyList" :key="index">
              <view class="leftbox">
                <view class="sill">{{ '金额：' + item.Money }}</view>
                <view class="time">{{ getTime2(item.CreateTime) }}</view>
              </view>
              <view class="rightbox" :style="{ color: statuColor[item.Status] }">{{ item.Status ==
                '2' ? '成功' : item.Status == '-1' ? '失败' :'待审核'}}</view>
            </view>

          </block>

        </scroll-view>
      </view>
    </view>
    <uni-popup type="center" ref="signbox" :animation="false">
      <view class="moneybox">
        <view class="moneytext">提现</view>
        <view class="moneycontent">
          <input type="number" placeholder="请输入金额" v-model="Money" />
        </view>

        <view class="summoneybox">
          <view class="summoney">{{ '可提现金额：' }}<text class="sumconmm">{{ (amount_of_money ? amount_of_money : '0')
              }}</text></view>
          <view class="allbtn" @click="Money = amount_of_money">全部提现</view>
        </view>
        <view class="btnbox">
          <view class="cancleBtn" @click="closePop"> 取消</view>
          <view class="confimbtn" @click="Withdrawal">确认</view>
        </view>
        <view class="Tiptext">注：提现金额不能小于1</view>
      </view>
    </uni-popup>
    <u-popup :show="showImage" mode="center" :safeAreaInsetBottom="false" :round="10" @close="showImage = false">
      <view class="img_container">
        <image class="img_box1" :src="shopInfo.QrCodeImg || shopInfo.DaiLiImg" mode="widthFix"></image>
        <view class="button_group">
          <button @click="savePic">保存图片</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      userList: [],
      userMoneyList: [],
      amount_of_money: 0,
      screenHeight: '',
      Money: 0,
      showImage: false,
      navIndexValue: 0,
      navMenu: ['推广明细', '提现明细'],
    };
  },
  onLoad() {
    this.getPhoneInfo()
    this.user = uni.getStorageSync('user');
    this.init()
    
  },
  onShow() {
   this.init()
  },
  methods: {
    init(){
      this.userListFn()
      this.getMoneyInfo()
      this.moneyList()
    },
    navIndex(index) {
      this.navIndexValue = index;
      this.init()
    },
    tixbtn() {
      // this.Money = 0
      this.$refs.signbox.open()
    },
    closePop() {
      this.$refs.signbox.close()
    },
    async Withdrawal() {

      if (Number(this.Money) < 1) {
        this.$pv.msg('提现金额不能小于1');
        return;
      }
      if (!Number(this.Money)) {
        this.$pv.msg('请输入正确的数字');
        return;
      }
      if (Number(this.amount_of_money) < Number(this.Money)) {
        this.$pv.msg('提现金额不能大于已拥有的佣金');
        return;
      }
      let _this = this
      uni.showModal({
        title: "温馨提示",
        content: '您确定要提现' + _this.Money + '元吗？',
        confirmText: "确定",
        success: async function (res) {
          if (res.confirm) {
            let res1 = await _this.$api.post('SaleChannel/Deposit', {
              AmountMoney: Number(_this.Money),
              ID: _this.ID
            })
            if (res1.code == 0) {
              _this.init()
              _this.$pv.msg(res1?.message);
              _this.Money = 0
              _this.$refs.signbox.close()
            } else {
              _this.$pv.msg(res1.message);
              return;
            }
          } else if (res.cancel) { }
        },
      });
    },
    savePic() {
      let that = this
      let imgUrl = that.shopInfo.QrCodeImg || that.shopInfo.DaiLiImg
      uni.downloadFile({
        url: imgUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function () {
                uni.showToast({
                  title: "保存成功",
                  icon: "none"
                });
              },
              fail: function () {
                uni.showToast({
                  title: "保存失败，请稍后重试",
                  icon: "none"
                });
              }
            });
          }
        }
      })
    },
    getPhoneInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.screenHeight = res.screenHeight
        }
      })
    },
    async userListFn() {
      let res = await this.$api.post("SaleChannel/MyRecommendUsers", {
        ID: uni.getStorageSync('user').UserID,
        PageSize: 99,
        PageIndex: 1,
      });
      if (res.code == 0) {
        this.userList = res.data;
      } else {
        this.$pv.msg(res.message)
      }
    },
    // 获取提现明细
    async moneyList() {
      let res = await this.$api.post("SaleChannel/UserDepositLogs");
      if (res.code == 0) {
        this.userMoneyList = res.data
      } else {
        this.$pv.msg(res.message)
      }
    },
    async getMoneyInfo() {
      let res = await this.$api.post("SaleChannel/SaleChannelDetail");
      if (res.code == 0) {
        this.amount_of_money = res?.data?.Commission || 0
      }
    },
    getTime2(l) {
			let d = new Date(l);
			let timestamp = d.getTime();
			return this.$util.unixDatetime(timestamp, 'yy-ss');
		},
  }
};
</script>


<style lang="scss">
.page {
  background-color: rgba(246, 246, 246, 1);
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;

  .box {
    background: linear-gradient(to bottom, #4b80fa, #4a80fe);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    width: 100%;

    .group_1 {
      // background: url(https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17154141842421322.png)
      //   100% no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      padding: 66rpx 310rpx 78rpx 312rpx;

      .group_2 {
        width: 128rpx;
        height: 128rpx;

        >image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        z-index: 10;
        border-radius: 50%;
        overflow: hidden;
        background-color: white;
        padding: 6rpx;
      }

      .group_3 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16rpx;
        position: absolute;
        left: 24rpx;
        top: 134rpx;
        width: 702rpx;
        height: 440rpx;
        display: flex;
        flex-direction: column;
        padding: 80rpx 60rpx 34rpx 60rpx;
        box-sizing: border-box;

        .text_3 {
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 32rpx;
          font-family: PingFang-SC-Bold;
          font-weight: normal;
          text-align: right;
          white-space: nowrap;
          line-height: 44rpx;
          align-self: center;
        }

        .section_1 {
          width: 454rpx;
          align-self: center;
          margin-top: 48rpx;
          flex-direction: row;
          display: flex;
          justify-content: space-between;

          .text-group_1 {
            display: flex;
            flex-direction: column;
            align-items: center;

            .text_4 {
              overflow-wrap: break-word;
              color: rgba(51, 51, 51, 1);
              font-size: 48rpx;
              font-family: PingFang-SC-Bold;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 66rpx;
            }

            .text_5 {
              overflow-wrap: break-word;
              color: rgba(153, 153, 153, 1);
              font-size: 28rpx;
              font-family: PingFang-SC-Medium;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 40rpx;
            }
          }

          .image_3 {
            width: 2rpx;
            height: 86rpx;
            margin: 12rpx 0 8rpx 0;
            background: #e4e4e4;
          }
        }

        .section_2 {
          width: 582rpx;
          margin-top: 48rpx;
          flex-direction: row;
          display: flex;
          justify-content: space-between;

          .text-wrapper_2 {
            border-radius: 40rpx;
            border: 1px solid #3572FE;
            display: flex;
            flex-direction: column;
            padding: 18rpx 52rpx 18rpx 52rpx;

            .text_8 {
              overflow-wrap: break-word;
              color: #3572FE;
              font-size: 28rpx;
              font-family: PingFang-SC-Bold;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 40rpx;
            }
          }

          .app_text-wrapper_2 {
            margin: 0 auto;
            border-radius: 40rpx;
            border: 1px solid #3572FE;
            display: flex;
            flex-direction: column;
            padding: 18rpx 52rpx 18rpx 52rpx;

            .text_8 {
              overflow-wrap: break-word;
              color: #3572FE;
              font-size: 28rpx;
              font-family: PingFang-SC-Bold;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 40rpx;
            }
          }

          .text-wrapper_3 {
            background-color: #3572FE;
            color: white;
            border-radius: 40rpx;
            display: flex;
            flex-direction: column;
            padding: 20rpx 68rpx 20rpx 68rpx;

            .text_9 {
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 28rpx;
              font-family: PingFang-SC-Bold;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 40rpx;

              &::after {
                border: none;
              }
            }
          }
        }
      }
    }

    .group_4 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 16rpx;
      align-self: center;
      margin-top: 320rpx;
      width: 702rpx;
      display: flex;
      flex-direction: column;
      padding: 16rpx 24rpx 32rpx 24rpx;
      box-sizing: border-box;

      .text-group_2 {
        margin-bottom: 22rpx;
        display: flex;
        align-items: center;

        .text_tem {
          overflow-wrap: break-word;
          font-family: PingFang-SC-Bold;
          font-weight: normal;
          text-align: right;
          white-space: nowrap;
        }

        .text_10 {
          color: #3572FE;
          font-size: 48rpx;
          letter-spacing: 3rpx;
          margin: 0 10rpx;
        }

        .text_11 {
          color: rgba(51, 51, 51, 1);
          font-size: 28rpx;
          letter-spacing: 2rpx;
        }

        .text_12 {
          color: rgba(51, 51, 51, 1);
          font-size: 32rpx;
          letter-spacing: 2rpx;
        }
      }

      scroll-view {
        max-height: 27vh;
      }

      .block_2 {
        width: 654rpx;
        flex-direction: row;
        display: flex;
        justify-content: space-between;
        margin-bottom: 24rpx;

        .image-text_2 {
          width: 90%;
          flex-direction: row;
          display: flex;
          // justify-content: space-between;
          align-items: center;

          .label_wh {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
          }

          .text-group_3 {
            flex: 1;
            overflow: hidden;
            /*超出部分隐藏*/
            white-space: nowrap;
            /*禁止换行*/
            text-overflow: ellipsis;
            /*省略号*/

            overflow-wrap: break-word;
            color: rgba(51, 51, 51, 1);
            font-size: 28rpx;
            letter-spacing: 2rpx;
            font-family: PingFang-SC-Bold;
            font-weight: normal;
            white-space: nowrap;
            line-height: 40rpx;
            margin-left: 20rpx;
          }
          .text-group_4{
            font-size: 22rpx;
            color: #FC6701;
          }
        }

        .text_15 {
          overflow-wrap: break-word;
          color: rgba(153, 153, 153, 1);
          font-size: 24rpx;
          font-family: PingFang-SC-Medium;
          font-weight: normal;
          text-align: right;
          white-space: nowrap;
          line-height: 34rpx;
          margin-top: 22rpx;
        }
      }

      .block_2:last-child {
        margin-bottom: 0;
      }

      .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #E4E4E4;

        .leftbox {

          .sill {
            font-size: 28rpx;
            font-weight: bold;
            color: #333333;
            margin-bottom: 8rpx;
          }

          .time {
            font-size: 24rpx;
            color: #999999;
          }
        }

        .rightbox {
          font-size: 28rpx;
          color: #706EEE;
        }
      }
    }
  }
}

.moneybox {
  width: 550rpx;
  height: fit-content;
  padding: 32rpx 0;
  background-color: #fff;
  border-radius: 32rpx;

  .summoneybox {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 30rpx;

    .summoney {
      font-size: 28rpx;
      color: #666666;

      .sumconmm {
        font-size: 32rpx;
        color: #333333;
      }
    }

    .allbtn {
      width: 120rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      border-radius: 30rpx;
      font-size: 20rpx;
      /* color: #fff; */
      font-size: 28rpx;
      color: #3572FE;
      /* background-color: #706EEE; */
    }
  }

  .moneytext {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    text-align: center;
  }

  .moneycontent {
    border: 2rpx solid #E4E4E4;
    width: 70%;
    height: 80rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    /* text-align: center; */
    line-height: 80rpx;
    font-size: 28rpx;
    border-radius: 8rpx;
    padding: 20rpx 0;
    line-height: 1;
    padding-left: 30rpx;

    >input {
      font: inherit;
      display: block;
      min-height: 0 !important;
      // height: 100%;
    }
  }

  .confimbtn {
    width: 240rpx;
    height: 80rpx;
    background: #3572FE;
    border-radius: 8rpx;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .Tiptext {
    font-size: 24rpx;
    color: #666666;
    text-align: center;
  }

  .btnbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 504rpx;
    margin: 40rpx auto;
  }
}

.img_container {

  padding: 20rpx 0;
  width: 600rpx;
  height: 700rpx;
  border-radius: 20rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  .img_box1 {
    width: 500rpx;
    height: 500rpx;
  }


  .button_group {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;

    button {
      width: 40%;
      background-color: #3572FE;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 70rpx;
      border-radius: 10rpx;
      color: white;
      font-size: 28rpx
    }
  }
}

.navList {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 16rpx;
  align-self: center;
  margin-top: 24rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 24rpx 62rpx 8rpx 54rpx;
  margin: 0 auto;
  margin-bottom: 20rpx;
  box-sizing: border-box;

  .navContent {
    flex-direction: row;
    display: flex;
    justify-content: space-between;

    .text_5 {
      overflow-wrap: break-word;
      color: rgba(51, 51, 51, 1);
      font-size: 32rpx;
      font-family: PingFang-SC-Bold;
      font-weight: normal;
      text-align: right;
      white-space: nowrap;
      line-height: 44rpx;
    }

    .navActive {
      font-weight: bold;

      ::after {
        content: "";
        display: block;
        width: 50rpx;
        height: 10rpx;
        background: #3572FE;
        margin: 0 auto;
        margin-top: 15rpx;
        border-radius: 25rpx;
      }
    }
  }
}
</style>